<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模态框</title>
  <link rel="stylesheet" href="../src/hans-ui.css">
</head>
<body>
  <div class="tt-header">
    <div class="left"><i class="fa fa-chevron-left"></i></div>
    <div class="title">模态框</div>
    <div class="right"><i class="fa fa-ellipsis-h"></i></div>
  </div>
  <div class="tt-navbar">
    <a class="navbar-item">
      <i class="fa fa-home icon"></i>
      <span class="name">首页</span>
    </a>
    <a class="navbar-item active">
      <i class="fa fa-list icon"></i>
      <span class="name">分类</span>
    </a>
    <a class="navbar-item">
      <i class="fa fa-search icon"></i>
      <span class="name">发现</span>
    </a>
    <a class="navbar-item">
      <i class="fa fa-user-o icon"></i>
      <span class="name">我的</span>
    </a>
  </div>
  <div class="tt-content">
    <p>内容区</p>
  </div>
  <!-- 模态框 -->
  <div class="tt-modal show">
    <div class="tt-mask"></div>
    <div class="tt-modal-wrap">
      <!-- 普通弹窗 -->
      <!-- <div class="tt-modal-body">
        <p>您的会员快到期了，请及时续费，不然会影响你的权益！</p>
      </div>
      <div class="tt-modal-footer">
        <div class="tt-btn">下次再说</div>
        <div class="tt-btn">立即续费</div>
      </div> -->
      <!-- 海报式 -->
      <div class="tt-modal-body no-padding">
        <img class="tt-modal-img" src="https://img1.sycdn.imooc.com/5d3e50f40001906206400780.png" alt="">
      </div>
      <i class="fa fa-close tt-modal-close"></i>
    </div>
  </div>
</body>
</html>